<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta http-equiv="content-security-policy">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!-- build:css /css/main.css -->
		<link href="/css/mui.css" rel="stylesheet" />
		<link href="/css/iconfont.css" rel="stylesheet" />
		<link href="/css/common.css" rel="stylesheet" />
		<!-- endbuild -->
		<style>
			.mui-segmented-control {
				border: 0 none;
				background-color: #fff;
			}

			.mui-segmented-control .mui-control-item {
				width: 25%;
				height: 40px;
				line-height: 40px;
				border: none;
				color: #444;
			}

			.mui-bar-tab {
				padding: 0;
			}

			.mui-bar-tab~.mui-content {
				padding-bottom: 0;
			}

			.mui-segmented-control .mui-control-item.mui-active {
				background-color: transparent;
				color: #e93326;
			}

			.mui-icon-arrowthinup:before {
				font-size: 18px;
			}

			.mui-icon-arrowthinup {
				width: 18px;
				height: 18px;
			}

			.mui-table-view:after {
				height: 0px;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav u-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<div id="search" class="mui-input-row" style=" margin-left: 40px; width: 75%; position: absolute;">
				<span class="mui-icon mui-icon-search" style="position: absolute; top: 0px; left: 5px; font-size: 22px;color: #ccc;"></span>
				<input type="search" id="search-v" readonly="yes" class="mui-input-clear" style=" background: #fff; " placeholder="请输入宝贝名">
			</div>
			<span id="to_info" class="mui-icon mui-icon-bars mui-pull-right" onclick="ssdd('#fnav')"></span>
		</header>
		<nav class="mui-bar mui-bar-tab otherNav" id="fnav">
			<a class="mui-tab-item" data-id="index.html" data-url="/index.html">
				<span class="mui-icon iconfont icon-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" data-id="category.html" data-url="/category.html">
				<span class="mui-icon iconfont icon-fenlei"></span>
				<span class="mui-tab-label">分类</span>
			</a>
			<a class="mui-tab-item" data-id="search.html" data-url="/search.html">
				<span class="mui-icon iconfont icon-fenleisousuo-home"></span>
				<span class="mui-tab-label">搜索</span>
			</a>
			<a class="mui-tab-item" data-id="cart.html" data-url="/cart.html">
				<span class="mui-icon iconfont icon-gouwuche1"></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item" data-id="user.html" data-url="/user/user.html">
				<span class="mui-icon iconfont icon-gerenzhongxin"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>

		<div id="screen" class="mui-segmented-control" style="border-bottom: 1px solid #ccc;border-radius:0;z-index:9;top:44px;position: fixed;">
			<a class="mui-control-item mui-active" data-val="default">默认</a>
			<a class="mui-control-item" data-val="sales">人气<span class="mui-icon mui-icon-arrowthinup"></span></a>
			<a id="price" class="mui-control-item" data-val="priceUp">价格<span class="mui-icon mui-icon-arrowthinup"></span></a>
		</div>

		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view product-list hot-product-list" id="hotProductList" style="margin-top:37px;">
					<div class="product-no" style="display: none;"><img src="img/no-product.png" width="50%" />
						<p>抱歉，没有找到您搜索的商品</p><span>换个关键词搜搜看~</span></div>
					<!--<li class="mui-table-view-cell mui-media">
						<a href="#">
							<img class="mui-img mui-pull-left" src="http://api.ikjtao.com/product/KD160915/20160713_100516_156.jpg">
							<div class="mui-rbox">
								<p>德国BEBA贝巴超级能恩配方奶粉3段 800g（保质期至17年2月）</p>
								<div class="price">价格：<span class="money">$4933.99</span><del>$14933</del></div>
								<div class="sales">销量：66 件</div>
							</div>
						</a>
					</li>-->

				</ul>
			</div>
		</div>

		<!-- build:js /js/vendor.js -->
		<script src="/js/mui.min.js"></script>
		<!-- bower:js -->
		<script src="/bower_components/mockjs/dist/mock.js"></script>
		<script src="/bower_components/zepto/zepto.js"></script>
		<script src="/bower_components/Zepto-Cookie/zepto.cookie.js"></script>
		<!--  endbower -->
		<!-- endbuild -->
		<!-- build:js /js/main.js -->
		<script src="/js/common.js"></script>
		<script src="/js/app.js"></script>
		<!-- endbuild -->

		<script>
			var page = 1;
			var sortType = '';
			var keyword = localStorage.getItem('keyword') ? localStorage.getItem('keyword') : '';
			$('#search-v').val(keyword);
			$('#price').on('tap', function() {
				if($(this).hasClass('mui-active')) {
					if($(this).attr('data-val') == 'priceUp') {
						$(this).attr('data-val', 'priceDown');
						$(this).find('span').removeClass('mui-icon-arrowthinup').addClass('mui-icon-arrowthindown')
					} else {
						$(this).attr('data-val', 'priceUp');
						$(this).find('span').removeClass('mui-icon-arrowthindown').addClass('mui-icon-arrowthinup')
					}
				}

			})
			var size = 10;
			var categoryId = localStorage.getItem('categoryid');
			(function(mui, doc) {
				mui.init({
					pullRefresh: {
						container: "#pullrefresh",
						up: {
							contentup: "上拉加载",
							contentrefresh: "正在加载...",
							contentnomore: '没有更多数据',
							callback: function() {
								getGoodsData();
							}
						}
					}
				});
				mui.ready(function() {
					var sdd = $('#t-search').val()
					getGoodsData(categoryId, keyword, page, size, sortType);
					mui('body').on('tap', '#screen a', function() {
						sortType = this.getAttribute('data-val');
						$("#screen a").removeClass('mui-active');

						$(this).addClass('mui-active');
						page = 1;
						mui('#pullrefresh').pullRefresh().refresh(true);
						mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 100);
						getGoodsData();
					});

					mui('body').on('tap', '#hotProductList li', function() {
						mui.openWindow({
							url: '/goods.html?goodsId='+$(this).attr('goods-id'),
							id: 'goods.html',

						})
//						localStorage.setItem('goodsId', $(this).attr('goods-id'))
					});

				});
			}(mui, document));
			var getGoodsData = function() {
				var flag = false;
				$.ajax({
					url: __BATE__ + 'api/getGoodsData',
					data: {
						keyword: keyword,
						categoryId: categoryId,
						sortType: sortType,
						page: page,
						size: size,
						code: codeVal
					},
					type: 'post',
					success: function(json) {
						var data = json.data;
						console.log(json)
						if(data.length == 0) {
							$('.product-no').show();
						}
						if(data.length != 0) {

							if(page == 1) {
								$("#hotProductList").html('');
							}

							++page;

							var htmls = '';

							for(var i = 0; i < data.length; i++) {
								htmls = htmls + '<li class="mui-table-view-cell mui-media" goods-id="' + data[i].productId + '">' +
									'<a>' +
									'<img class="mui-img mui-pull-left" src="' + data[i].productImage + '">' +
									'<div class="mui-rbox">' +
									'<p class="line-num1">' + data[i].name + '</p>' +
									'<div class="price">价格：<span class="money">￥' + data[i].pn + '</span></div>' +
									'<div class="sales"><span></span>' + data[i].productId + '人喜欢</div>' +
									'</div>	' +
									'</a>' +
									'</li>';
							}
							var oldHtml = $("#hotProductList").html();
							$("#hotProductList").html(oldHtml + htmls);
						} else {

							flag = true;
						}
						try {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(flag);
						} catch(e) {}
					},
					error: function() {
						serverErr();
					}
				});
			};
		</script>
	</body>

</html>
